<template>
	<view>
		<!-- 搜索栏 -->
		<view>
			<uni-search-bar :radius="10" @confirm="search" placeholder="搜索"></uni-search-bar>
		</view>
		<!-- 轮播图 -->
		<view class="swiper-view">
			<swiper class="swiper" indicator-dots="true" autoplay="true" circular="true"
				indicator-active-color="#ffffff">
				<swiper-item v-for="(swiper, index) in swiperList" :key="index" @tap="toSwiper(swiper)">
					<image mode="aspectFill" :src="swiper.image_url"></image>
				</swiper-item>
			</swiper>
		</view>
		<view>
			<uni-tag text="新 闻 通 知"></uni-tag>
		</view>
		<!-- 新闻 -->
		<view>
			<uni-list>
				<!-- 水平排列，右图左文 -->
				<uni-list-item title="美国还在千方百计给冬奥会添堵，可他们就是要来北京支持冬奥会！" note="朝阳少侠 2021/1/28">
					<template v-slot:footer>
						<view class="uni-thumb" style="margin: 0;" @click="onClick()">
							<image src="/static/image/index/p1.jpeg" mode="aspectFill"></image>
						</view>
					</template>
				</uni-list-item>
			</uni-list>
			<uni-list>

				<uni-list-item title="北京冬奥会火炬传递2月2日至4日在三个赛区举行" note="央视网 2021/1/28">
					<template v-slot:footer>
						<view class="uni-thumb" style="margin: 0;" @click="onClick1()">
							<image src="/static/image/index/p2.jpeg" mode="aspectFill"></image>
						</view>
					</template>
				</uni-list-item>
			</uni-list>
			<uni-list>

				<uni-list-item title="安心暖心，才能更好就地过年（评论员观察）" note="央视网 2021/1/28">
					<template v-slot:footer>
						<view class="uni-thumb" style="margin: 0;" @click="onClick2()">
							<image src="/static/image/index/p3.jpeg" mode="aspectFill"></image>
						</view>
					</template>
				</uni-list-item>
			</uni-list>
			<view>
				<uni-tag text="政 策 解 读" type="default"></uni-tag>
			</view>
			<uni-list>

				<uni-list-item title="做好一季度经济稳增长工作 陕西出台这10条具体措施" note="陕西省发展改革委网站 2022/1/25">
					<template v-slot:footer>
						<view class="uni-thumb" style="margin: 0;" @click="onClick3()">
							<image src="/static/image/index/p4.jpeg" mode="aspectFill"></image>
						</view>
					</template>
				</uni-list-item>
			</uni-list>
			<uni-list>

				<uni-list-item title="第三批全国农村公共服务典型案例 | 福建古田：“互助孝老食堂”开启农村养老新篇章" note="政研室 2022/1/21">
					<template v-slot:footer>
						<view class="uni-thumb" style="margin: 0;" @click="onClick4()">
							<image src="/static/image/index/p1.jpeg" mode="aspectFill"></image>
						</view>
					</template>
				</uni-list-item>
			</uni-list>
		</view>
		<view>
			<text class="text">爱 心 商 店</text>
		</view>
		<view>
			<view class="coms-list">
				<view class="height"></view>
				<view class="company-list">
					<view class="company" v-for="(item,index) in companyList" :key="index"
						@click="toProductList(index)">
						<image :src="item.img"></image><!-- mode="widthFix" -->
						<view class="name">{{item.name}}</view>

					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		listing
	} from '../../../api/api.js'
	import {
		url
	} from '../../../api/request.js'
	export default {
		data() {
			return {
				//轮播
				swiperList: [],
				companyList: [{
						id: 0,
						img: '../../../static/image/index/p1.jpeg',
						name: '商品',
						price: '￥168',
						slogan: '1235人付款'
					},
					{
						id: 1,
						img: '../../../static/image/index/p2.jpeg',
						name: '商品',
						price: '￥168',
						slogan: '1235人付款'
					},
					{
						id: 2,
						img: '../../../static/image/index/p3.jpeg',
						name: '商品',
						price: '￥168',
						slogan: '1235人付款'
					},
					{
						id: 3,
						img: '../../../static/image/index/p4.jpeg',
						name: '商品',
						price: '￥168',
						slogan: '1235人付款'
					}
				],
			}
		},
		methods: {
			//轮播图跳转
			toSwiper(e) {
				console.log(e)
				// uni.navigateTo({
				// 	url: "/pages/index/profile"
				// })

			},
			getSwipers() {
				let Url = `${url}/banner/`
				listing(Url)
					.then((res) => {
						this.swiperList = res.data
					})
					.catch((err) => {
						console.log(err)
					})
			}
		},
		mounted() {
			this.getSwipers()
		}
	}
</script>

<style lang="scss">
	.swiper-view {
		.swiper {
			width: 100%;
			height: 300upx;

			image {
				width: 100%;
				height: 300upx;
			}
		}

	}

	/* 略缩图 */
	.uni-thumb {
		flex-shrink: 0;
		margin-right: $uni-spacing-row-base;
		width: 125px;
		height: 75px;
		border-radius: $uni-border-radius-lg;
		overflow: hidden;
		border: 1px #f5f5f5 solid;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.text {
		background-color: #f0d2c6;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		display: flex;
		align-items: center; //垂直居中
		justify-content: center; //水平居中
		font-size: 35rpx;
	}

	.box {
		.company-list {
			padding: 15upx 20upx 15upx 20upx;
			column-count: 2;
			column-width: 50%;
			column-gap: 10upx;

			>view {
				display: flex;
				background-color: #f8f8f8;
				position: relative;

				&:nth-child(1) {
					image {
						width: 100%;
						height: 0;
					}
				}

				&:nth-child(2),
				&:nth-child(3) {
					image {
						width: calc(50% - 5upx);
						height: 0;
					}
				}

				&:nth-child(2) {
					margin-bottom: 10upx;
				}
			}
		}
	}


	.coms-list {

		.height {
			height: 30upx;
		}

		.loading-text {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 60upx;
			color: #000000;
			font-size: 24upx;
		}

		.company-list {
			width: 95%;
			padding: 0 2.5% 2.5vw 2.5%;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			.company {
				width: 48.75%;
				border-radius: 20upx;
				background-color: #fff;
				margin: 0 0 20upx 0;

				image {
					width: 100%;
					border-radius: 20upx 20upx 0 0;
					height: 200px;
				}

				.name {
					width: 92%;
					padding: 10upx 4%;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					text-align: justify;
					overflow: hidden;
					font-size: 35upx;
				}

			}

		}
	}
</style>
